<template>
	<div class="popup">
		<div class="popup-box">
			<div class="eTitle">
				<h2>{{ type==0?'发布帖子':elForm.title }}</h2>
				<i @click="cancel" class="el-icon-close"></i>
			</div>
			<div class="popup-main" v-if="type==1">
				<div class="title">
					<div class="user">
						{{ elForm.user }}
					</div>
					<div class="cont">
						{{ elForm.content }}
						<div class="date">
							{{ elForm.date }}
						</div>
					</div>
				</div>
				<div class="discuss">
					<div v-for="(dis,idx) in elForm.discuss" :key="idx">
							<div class="user">
							{{ dis.user }}
						</div>
						<div class="cont">
							{{ dis.content }}
							<div class="date">
								{{ dis.date }}
							</div>
						</div>
					</div>
				</div>
				<div class="btn">
					<el-input style="margin-bottom: 10px;" placeholder="请输入回复" v-model="comment" clearable></el-input>
					<el-checkbox v-model="checked">@对应人员</el-checkbox>
					<el-select style="margin-left: 20px;" v-if="checked" v-model="task_user" filterable multiple placeholder="请选择任务执行人">
						<el-option
							v-for="(item,idx) in options"
							:key="idx+1"
							:label="item"
							:value="idx+1"
						></el-option>
					</el-select>
					<el-button @click="AddComment" style="margin-left: 20px;" class="remark" plain size="medium" type="primary">回复</el-button>
				</div>
			</div>
			<div class="popup-main tiezi" v-else>
				<div>
					<el-input clearable maxlength="50" placeholder="请输入帖子标题" v-model.trim="title"></el-input>
				</div>
				<div>
					<el-input :rows="7" maxlength="1000" type="textarea" clearable placeholder="请输入帖子内容" v-model="content"></el-input>
				</div>
				<div>
					<el-checkbox v-model="checked">@对应人员</el-checkbox>
					<el-select style="margin-left: 20px;" v-if="checked" v-model="task_user" filterable multiple placeholder="请选择任务执行人">
						<el-option
							v-for="(item,idx) in options"
							:key="idx+1"
							:label="item"
							:value="idx+1"
						></el-option>
					</el-select>
					<el-button style="margin-left: 20px;" @click="AddComment" class="remark" plain size="medium" type="primary">发布</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'task',
	data() {
		return {
			type: '',
			task_user: '',
			options: ['赵大','王二','张三','李四','陈五'],
			checked: false,
			comment: '',
			loading: false,
			title: '',
			content: '',
			elForm: {
				user: '李工',
				date: '2021-06-20',
				title: '题西林壁',
				content: '目，只缘身在此山中。',
				discuss: [
					{
						user: '刘工',
						date: '2021-06-20',
						content: '好诗好诗！！！',
					},
				]
			},
			isFile: true
		};
	},
	methods: {
		SubEvents(type, data) {
			this.type = type
			// this.$popup.maxHeight();
			this.elForm = {...this.elForm, ...data}
		},
		goBack() {
			this.$router.push({
				path: '/projectDetail',
				query: {
					id: 1
				}
			});
		},
		GetData() {
			let data = {
				type: Number(this.articleType),
				id: this.id,
				index_img_url: this.elForm.index_img_url,
				title: this.elForm.title,
			};
			this.$http.APIASK('/course/save', 'post', data)
			.then(data => {
				if (data&&data.code == 0) {
					this.$emit('confirm', false);
					if (this.type == 0) {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					} else {
						this.$message({
							message: 'ok',
							type: 'success'
						});
					}
				}
			});
		},
		AddComment() {},
		RadioChange(e) {
			if (e == 1) {
				this.articleType = 1;
			} else {
				this.articleType = 2;
			}
		},
		confirm() {
			this.$refs['elForm'].validate(valid => {
				if (valid) {
					this.GetData();
				} else {
					return false;
				}
			});
		},
		cancel() {
			this.$emit('cancel', false);
		}
	}
};
</script>
<style scoped lang="scss">
	.popup {
		.popup-box {
			width: 1300px;
			background-color: #fff;
			.popup-main {
				width: 60%;
				margin: 30px auto;
				padding: 0;
				.title, .discuss>div {
					display: flex;
					border: 1px solid #f1f1f1;
					margin-bottom: 5px;
					.user {
						width: 10%;
						background-color: #e1e1e1;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.cont {
						width: 90%;
						min-height: 60px;
						position: relative;
						padding: 20px;
						.date {
							position: absolute;
							bottom: 0px;
							right: 10px;
						}
					}
				}
				.discuss {
					margin-bottom: 30px;
				}
				&.tiezi {
					padding-bottom: 30px;
					>div {
						margin-bottom: 10px;
						min-height: 40px;
					}
				}
			}
		}
	}
	.Lbox-content {
		.content {
			display: flex;
			.lf {
				width: 60%;
			}
			.rt {
				width: 30%;
				margin-left: 8%;
			}
		}
		.el-form--inline .el-form-item {
			display: block;
		}
	}
</style>
